<template>
    <div class="wrap"  >
        <!-- <div class="top"> 随 手 拍 平 台 </div>               -->
        <div class="bgPhoto" :style="{'background-image': 'url(' + newBg + ')',      
      'background-size':'cover',
      'background-position': 'center bottom',
      'opcity': '1'}"> 
      <span style="display:none">1 </span> </div>
        <!-- <van-tabs v-model:active="active"> -->
            <!-- <van-tab title="邮箱登录">                
                <van-form @submit="onLogin" class="mainForm">
                    <van-cell-group inset>
                            <van-field
                                v-model="login_email"
                                name="login_email"
                                label="邮箱"
                                placeholder="登录邮箱"
                                :rules="[{ required: true, message: '填写用来登录的邮箱' }]"
                            />
                            <van-field
                                v-model="login_password"
                                type="password"
                                name="login_password"
                                label="密码"
                                placeholder="密码"
                                :rules="[{ required: true, message: '请填写密码' }]"
                            />
                        </van-cell-group>
                    <div style="margin: 16px;font-size: 19px;">
                        <van-button  round block type="info" native-type="submit" color="rgba(243,12,56, .8)">
                            登 录
                        </van-button>
                    </div>
                </van-form>
            </van-tab> -->
            <!-- <van-tab title="手机快捷登录">  -->
            <div class="subForm">
                        <!-- <b style="font-size:20px; margin-top: 5px; color: white; display: inline-block;padding: 10px;"  > 即刻注册登录随手拍 </b>      -->
                        <van-form  @submit="onSubmit">
                            <van-cell-group inset>
                                <van-field
                                    v-model="email"
                                    name="email"
                                    label="手机"
                                    placeholder="手机"
                                    :rules="[{ required: true, message: '填写用来注册的手机' }]"
                                    />
                                    <!-- <van-field
                                        v-model="password"
                                        type="password"
                                        name="password"
                                        label="验证码"
                                        placeholder="密码"
                                        :rules="[{ required: true, message: '请填写密码' }]"
                                    /> -->
                                    <!-- <van-field   v-model="password"
                                        type="password"
                                        name="password"
                                        label="验证码"
                                        :rules="[{ required: true, message: '请填写密码' }]"
                                        placeholder="密码">
                                        <template #input>
                                        <input  value="">
                                        </template>
                                        <van-button type="primary">发送验证码</van-button>                 
                                    </van-field> -->
                                    <van-field
                                        v-model="sms"
                                        center
                                        clearable
                                        label="短信验证码"
                                        placeholder="请输入短信验证码"
                                        :rules="[{ required: true, message: '请填写sms' }]"
                                    >
                                        <template #button>
                                            <van-button :disabled="smsDisa" size="small" type="primary" @click="handleSms" >发送验证码</van-button>
                                        </template>
                                    </van-field>
                                </van-cell-group>
                            <div style="margin: 16px;">
                                <van-button round  block type="info" native-type="submit" color="rgba(243,12,56, .8)">
                                    登 录 
                                </van-button>
                            </div>
                        </van-form>
                    <!-- </van-tab> </van-tabs> -->
                <!-- <div style="margin-bottom:10px;"> <b style="font-size: 26px;color:white;"> 手机号初次注册后自动登录 </b> <br><br> </div> -->
            </div>
            
        <!-- <van-button type="warning" @click="toRanking" > 前 往 新 的 录 入 </van-button> <br> <br> -->
        <!-- <hr style="width:60%; color:rgba(0,0,0,0.1);"/> <br> -->
        <!-- <van-button type="primary" @click="toSong" > 户 型 图 鉴 </van-button> <br> <br> -->
        <!-- <van-button type="primary" @click="toPlexSearch" > 查 询 户 型 </van-button> -->
        <!-- <div class="downPic"> 
            <van-image
                width="9rem"
                height="5rem"
                fit="contain"
                src="https://636c-cloud1-5gc90rkv0c4a396c-1310135976.tcb.qcloud.la/%E4%B8%AA%E4%BA%BA%E8%A1%8C%E4%B8%BA%E6%B4%BB%E5%8A%A8%E7%9B%91%E6%B5%8B.png?sign=889efa1066e888513ef9ed5312610d7c&t=1663207439"
            />
        </div> -->
        <van-overlay :show="rayShow" @click="rayShow = false" >
            <div class="rayWrapper" @click.stop>
                <div  class="startImg">
                    <van-image
                    width="8rem"
                    height="15rem"
                    fit="contain"
                    src="https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/%E9%9A%8F%E6%89%8B%E6%8B%8D%E5%BC%80%E5%B1%8F2.png"            
                   
                />
                </div>            
                <div class="rayBlock" >
                        <van-button type="warning" style="font-weight:bold;font-size: 20px;" @click="handleRayRoute"> 随 手 拍 上 传 </van-button> <br> <br>
                        <!-- <van-button type="warning" color="skyblue" style="font-weight:bold;" @click="toRank"> 随 手 拍 排 行 榜 </van-button><br><br> -->
                        <!-- <van-button v-if="hasLogin" color="orange" style="font-weight:bold;" @click="toRecord"> 即 刻 录 入 </van-button> -->
                </div>
            </div>
        </van-overlay>
    </div>



</template>

<script >
import { ref, onMounted, getCurrentInstance, inject } from 'vue';
import {useRouter, useRoute} from 'vue-router'
import moment from 'moment'
import { Dialog, Toast } from 'vant'
// import utils from "../router/util";
const bgImgList = [ 'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/X2%E5%9F%8E%E5%B8%82%E9%9A%8F%E6%89%8B%E6%8B%8D%E8%83%8C%E6%99%AF.jpg?sign=e56c1ddeb9865b848d27966971952c2e&t=1663596568',
                    'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/X3%E5%9F%8E%E5%B8%82%E9%9A%8F%E6%89%8B%E6%8B%8D%E8%83%8C%E6%99%AF.jpg?sign=89bea3f2be8ee2eb5c4b47cad42d2a0d&t=1663598661',
                    'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/%E9%9A%8F%E6%89%8B%E6%8B%8D%E8%83%8C%E6%99%AFX.jpg?sign=9e1f2e922c635bac06adcd1802340485&t=1663586288',
                    'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/nologoH5-720x1560.png'


                    
]   

 export default { 
    setup(){
        const cloud = inject('$cloud')  
        let router = useRouter();
        let route = useRoute()
        // const activeId = ref(1);
        const activeIndex = ref(0);
        const username = ref('');
        const password = ref('');
        const sms = ref('')
        const smsDisa = ref(false)
        const department = ref('')
        const user_score = ref('')
        const telphone = ref('')
        const email = ref('');
        const active = ref(1);
        const login_email = ref('')
        const login_password = ref('')
        const bg_img = ref('red')
        // const newBg = bgImgList[Math.floor(Math.random() * (2 - 0 + 1)) + 0]
        const newBg = bgImgList[3]
        const rayShow = ref(true) // 开屏弹窗
        const hasLogin = ref(false) // 是否登陆状态

        const onitemclick = (data)=>{
                    console.log(data)
                    router.push({
                        name: 'complexDetail',
                        query: { name: data.text, mainIndex: activeIndex.value  }
                    })
                }
        
        // ！！！！Todo 把登录注册的逻辑到一个
        // 注册处理
        const onSubmit = (values) => {
                        if(values.email){
                            console.log('submit', values);                      
                        // 验证码+密码注册
                        cloud.auth().signUpWithPhoneCode(email.value,sms.value,"").then((res)=>{
                            console.log('随手拍平台注册成功')
                            // 手机短信验证码登录
                            cloud.auth()
                            .signInWithPhoneCodeOrPassword({
                                phoneNumber: email.value,
                                phoneCode: sms.value
                            })
                            .then((res) => {
                                // 登录成功
                                Toast('随手拍登录成功')
                                router.push({
                                        name: 'behaveRecord'
                                    })
                            });
                        })
                            }else{
                                alert('未填写')
                            }                                                                               
                    };
            const  isMobile = (mobile)=> {
                    return /^1[3-9]\d{9}$/.test(mobile)
            }
            const handleSms = (values)=>{
                if(isMobile(email.value)){
                    cloud.auth()
                            .sendPhoneCode(email.value)
                            .then(() => {
                                // 发送验证邮件成功
                                console.log('验证码发送成功')
                                smsDisa.value = true
                                setTimeout(()=>{ smsDisa.value = false },60000)
                                Toast(`${email.value}连接成功!👇👇\n 请接收验证码`)
                            }).catch( (error)=>{
                                console.log('出错', error)
                                alert(error)
                            } )
                }else{
                    alert('手机格式不正确')
                }
            }
          
            // //发送验证码
            // cloud.auth().sendPhoneCode("手机号").then((res)=>{
            //     console.log('验证码发送成功')
            // })
            // // 验证码+密码注册
            // app.auth().signUpWithPhoneCode("手机号","六位验证码","自定义密码").then((res)=>{
            //     console.log('注册成功')
            // })
        // 登录处理
        const onLogin = (values) => {
            console.log('login', values);      
            cloud.auth()
            .signInWithEmailAndPassword(values.login_email, values.login_password)
            .then((loginState) => {
                // 登录成功
                console.log('KKK', loginState)
                Toast('登录成功')
                router.push({
                    name: 'behaveRecord'
                    })
            }).catch( (error)=>{
                                console.log('登录出错', error)
                                alert('登录未成功，请检查用户名等信息是否正确')
                            } )
        }

        const toRanking = ()=>{
            console.log('behaveRecord')
            router.push({
                name: 'behaveRecord'
            })
        }
        const toRank = ()=> {
            router.push({
                name: 'actionRank'
            })
        }
        const toRecord = ()=>{
            router.push({
                name: 'behaveRecord'
            })
        }
        const handleRayRoute = ()=> {
            if(hasLogin.value){
                Toast({
                        message: '欢迎回来',
                        iconSize: '110px',
                        icon: 'https://6164-adegg-2gzf0s396d911a4a-1252121250.tcb.qcloud.la/city_action/%E6%B1%9F%E5%B0%8F%E9%A9%AC4.png',
                    })
                router.push({
                name: 'behaveRecord'
                })
            }else{
                rayShow.value  = false
            }
      
        }
        const toPlexSearch = ()=>{
            console.log(11)
            router.push({
                name: 'complexDetail',
                query: { name: 'search', mainIndex: 1  }
            })
        }

        onMounted(async()=>{                      
                        const cloud = inject('$cloud')  
                        console.log('index 行为录入', cloud.auth().currentUser.phone)        
                        const loginState = cloud.auth().hasLoginState()
                        const user = cloud.auth().currentUser.phone?cloud.auth().currentUser.phone: ''
                        if (loginState) {                                                    
                            // Dialog.confirm({
                            //     title: 'Tips',
                            //     message: `当前用户${user}已登录，立即跳转到随手拍？`,
                            //     cancelButtonText: '重新登录'
                            //     })
                            //     .then(() => {
                            //         router.push({
                            //             name: 'behaveRecord'
                            //         })
                            //     })
                            //     .catch(() => {
                            //         // on cancel
                            // })
                            hasLogin.value = true
                        } else {
                        // 没有登录态，或者登录态已经失效
                        }
                        // setTimeout(()=>{
                        //     rayShow.value = false
                        // },10000)
                    })
                return {
                        router,
                        route ,
                        active,
                        email,
                        // activeId ,
                        // activeIndex ,
                        // username ,
                        password,  
                        // department, 
                        // user_score ,
                        // telphone ,
                        // items ,
                        onSubmit,
                        toRanking,
                        login_email,
                        login_password,
                        onLogin,
                        // toSong,
                        toPlexSearch,
                        newBg,
                        bg_img,
                        sms,
                        handleSms,
                        smsDisa,
                        rayShow,
                        toRank,
                        hasLogin,
                        toRecord,
                        handleRayRoute
                }

            // const cloud = inject('$cloud')  
            // const db = cloud.database();  

            }
  }




</script>

<style lang="scss" >
    body {
        margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
        // background: 'url(' + v-bind(newBg) + ')';     
      background-repeat:'no-repeat';
      background-size: 90%;
      background: rgba(120, 101, 101, 0.2);
      opacity: 1;      
    }
    .bgPhoto {
        // background: 'url(' + v-bind(newBg) + ')';     
        // background-repeat:'no-repeat';
        background-size: cover;
        // background: rgba(120, 101, 101, 0);
        opacity: 1;      
        height: 105%;
        position: absolute;
        z-index: -1;
        width: 100%;
        top: 1px;
    }
    .mainForm{
        margin-top: 50px;
    }
    .wrap{
        /* background: 'url(' + v-bind(newBg) + ')';     
      background-repeat:'no-repeat';
      background-size: 100%; */
      background: rgba(120, 101, 101, 0.1);
      height: 800px;
      z-index: 100;   
     }
     .subForm{
        position: absolute;
        bottom: 250px;
     }
    .top{
        margin: 1px auto;
        margin-bottom: 16px;
        width: 100%;
        background: lightcyan;
        padding-bottom: 5px;
        padding-top: 5px;
        font-weight: bold;
        font-size: 17px;
    }
    .tree{
        height: 500px !important;
    }
    .titleSlot{
        color: white ;
        font-weight: bold;
        background-color: darkgoldenrod;
        padding: 5px;
        width: 20px;
        font-size: 20px;
    }
    .downPic{      
        position: absolute;
        bottom: 10px;
        width: 100%;
        opacity: 0.8;
        z-index: -1;
    }
    .rayWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    // width: 100%;
    // background-image: url() ;
    // background-size: cover;
    top: -400px;
  }
    .rayBlock {
        width: 220px;
        height: 220px;
        background-color: rgba(255, 255, 255, 0.1);
        position: relative;
        top: 150px;
        font-size: 19px;
    }
    .startImg{
        position: absolute;
        bottom: 40%;
        // left: 1%;
        width: 100%;  
        height: 350px;      
        z-index: -1;
    }

</style>